<!-- 用户管理-用户列表 -->
<template>
  <div class="app-container">
    <!-- 头部搜索区域 -->
    <div class="search_and_new">
      <div class="put">
        <el-input v-model="input1" placeholder="请输入要查询的姓名/手机号" style="width:200px;" />
      </div>
      <div class="new_btn">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="newConfirm">添加用户</el-button>
      </div>
      <template>
        <el-cascader
          ref="cascader"
          v-model="departmentValue"
          :show-all-levels="false"
          style="width: 200px"
          :options="departmentList"
          :props="props"
          clearable
          filterable
          placeholder="请搜索选择部门"
        />
      </template>
      <template>
        <el-cascader
          v-model="postValue"
          :show-all-levels="false"
          style="width: 200px"
          :options="postList"
          :props="props"
          clearable
          filterable
          placeholder="请搜索选择岗位"
        />
      </template>
      <template>
        <el-select v-model="roleValue" clearable placeholder="请选择角色">
          <el-option v-for="item in roleList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </template>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="queryList">搜索</el-button>
      <el-button type="primary" size="mini" @click="goThat">刷新</el-button>
      <el-button type="primary" size="mini" @click="resetList">重置</el-button>
    </div>
    <div style="display: flex;margin-top: 20px;">
      <el-upload
        class="upload-demo"
        :action="action"
        :on-change="handleChange"
        :on-success="fileUpOk"
        :on-error="fileUpErr"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
      </el-upload>
      <el-button style="margin-left: 20px; height: 30%;" size="small" type="primary" @click="templateexport">模板导出
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table v-loading="listLoading" :data="list" stripe style="width:100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="姓名" width="100">
        <template slot-scope="scope">{{ scope.row.nickName }}</template>
      </el-table-column>
      <el-table-column label="部门" width="100">
        <template slot-scope="scope">{{ scope.row.departmentTitle }}</template>
      </el-table-column>
      <el-table-column label="拥有权限" width="100">
        <template slot-scope="scope">
          <span v-for="item in scope.row.departmentIds" :key="item + 1">
            <span>{{ item }}</span> <br>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="岗位" width="100">
        <template slot-scope="scope">
          <span v-for="item in scope.row.hontPostNames" :key="item + 1">
            <span>{{ item }}</span> <br>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="角色" width="100">
        <template slot-scope="scope">
          <span>
            {{ scope.row.roles }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="认证状态" width="100">
        <template slot-scope="scope">
          <span>{{
            scope.row.approve === 0
              ? '审核中'
              : scope.row.approve === 1
                ? '通过'
                : scope.row.approve === 2
                  ? '拒绝'
                  : '-'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否禁用" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            active-value="-1"
            inactive-value="0"
            @change="switch_change(scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否允许后台登录" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isBackstage"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
            @change="switch_allowLogin(scope.row.id, scope.row.isBackstage)"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button v-show="false" type="primary" size="mini" @click="grade_change(scope.$index)">查看</el-button>
          <el-button
            type="primary"
            size="mini"
            :disabled="scope.row.approve == '1' ? true : false"
            @click="authentication(scope.$index)"
          >认证</el-button>
          <el-button type="success" size="mini" @click="operation(scope.row, scope.$index)">编辑</el-button>
          <el-button type="danger" size="mini" @click="operation_del(scope.row, scope.$index)">删除</el-button>
          <el-popover placement="left" width="200" trigger="click">
            <div style="display: flex;align-items: center;">
              <el-button type="primary" size="mini" @click="menuPer(scope.row)">菜单权限</el-button>
              <el-button type="primary" size="mini" @click="dataPer(scope.row)">数据权限</el-button>
              <el-button type="primary" size="mini" @click="restPassword(scope.row)">重置密码</el-button>
            </div>

            <el-button slot="reference" type="primary" size="mini">更多</el-button>
          </el-popover>

        </template>
      </el-table-column>
    </el-table>
    <!--   分页区 -->
    <div class="paging_device">
      <el-pagination
        :current-page="pages.pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pages.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.totalElements"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹出区域  认证 -->
    <el-dialog
      title="用户认证"
      :visible.sync="gradeChangeDialog"
      :close-on-click-modal="false"
      width="20%"
      class="dialog"
      :before-close="handleClose"
    >
      <div class="gradeChangeTitle">姓名：{{ userName }}</div>
      <div class="gradeChangeTitle">手机号：{{ phone }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="refuse">拒绝</el-button>
        <el-button type="primary" size="small" @click="pass">通过</el-button>
      </span>
    </el-dialog>
    <!-- 添加用户   弹窗-->
    <el-dialog
      :title="dialogtitle"
      :visible.sync="addUserDialog"
      :close-on-click-modal="false"
      width="25%"
      class="dialog"
      :before-close="handleCloseAddUser"
    >
      <el-form ref="NewruleForm" :model="NewruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
        <el-form-item label-width="100px" label="创建类型:" prop="type">
          <el-radio-group :key="typeKey" v-model="NewruleForm.type">
            <el-radio
              v-for="item in typegroup"
              :key="item.value"
              :value="item.value"
              :label="item.value"
              @click.native.prevent="changetype(item.value)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名:" prop="nickName">
          <el-input
            v-model="NewruleForm.nickName"
            placeholder="请输入用户名"
            type="text"
            size="mini"
            autocomplete="off"
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item v-show="typeDisable" label="手机号:" prop="mobile">
          <el-input
            v-model="NewruleForm.mobile"
            type="text"
            size="mini"
            placeholder="请输入手机号"
            autocomplete="off"
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item v-show="typeDisable" label="密码:">
          <el-input
            type="text"
            size="mini"
            placeholder="密码默认 hk+手机号后六位"
            autocomplete="off"
            disabled
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item v-show="!typeDisable" label="账号:" prop="userName">
          <el-input
            v-model="NewruleForm.userName"
            type="text"
            :disabled="dialogtitle === '编辑'"
            size="mini"
            placeholder="请输入账号"
            autocomplete="off"
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item v-show="!typeDisable && dialogtitle !== '编辑'" label="密码:" prop="pass">
          <el-input
            v-model="NewruleForm.pass"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item v-show="!typeDisable && dialogtitle !== '编辑'" label="确认密码:" prop="checkPass">
          <el-input
            v-model="NewruleForm.checkPass"
            type="password"
            autocomplete="off"
            placeholder="确认密码"
            style="width: 10vw;"
          />
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input v-model="NewruleForm.department" size="mini" placeholder="请选择" disabled style="width: 10vw;" />
          <el-popover placement="right" width="400" trigger="click">
            <el-tree :data="optionData" :props="defaultProps" @node-click="handleNodeClick" />
            <el-button slot="reference" type="primary" size="mini" icon="el-icon-plus">选择部门</el-button>
          </el-popover>
        </el-form-item>
        <el-form-item label="所属岗位">
          <el-select v-model="value1" multiple filterable placeholder="请选择岗位">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="角色分配">
          <el-select v-model="value2" filterable allow-create default-first-option placeholder="请选择角色">
            <el-option v-for="item in optionsArr" :key="item.value" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="establish('NewruleForm')">提交</el-button>
      </span>
    </el-dialog>
    <!-- 菜单权限 -->
    <el-dialog title="菜单权限" :visible.sync="menuShow" width="30%">

      <el-tree
        ref="menuTree"
        :data="menuData"
        show-checkbox
        check-on-click-node
        node-key="id"
        :default-checked-keys="defaultMenuTree"
        :default-expand-all="defaultExpand"
        :props="menuDefaultProps"
      />
      <div slot="footer" class="dialog-footer">
        <el-checkbox v-model="checked" @change="checkedAll" /> 全选/反选
        <el-button style="margin: 0px 10px;" @click="menuShow = false">取 消</el-button>
        <el-button type="primary" @click="menuIsOk('menuTree')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据权限 -->
    <el-dialog title="数据权限" :visible.sync="dataShow" width="30%">
      <div class="dataListbox">
        <el-checkbox-group v-model="dataCheckboxList">
          <el-checkbox
            v-for="item in dataList"
            :key="item.id"
            class="dataListbox_item"
            :label="item.templateName"
            @change="getCheckModel(item)"
          />
        </el-checkbox-group>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-checkbox v-model="dataChecked" :indeterminate="isIndeterminate" @change="handleCheckAllChange" /> 全选/反选
        <el-button style="margin: 0px 10px;" @click="dataShow = false">取 消</el-button>
        <el-button type="primary" @click="dataIsOk()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import IP from '@/Yapi/config.js'
  import {
    setMenu,
    getEchoMenu,
    SynchronizeBackground,
    getDateAllList,
    getPeopleDataList,
    submDataList
  } from '@/Yapi/java/modules/handelLogin.js'
  import {
    hontPermissionGetAllList
  } from '@/Yapi/java/modules/liucheng'

  export default {
    components: {},
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.NewruleForm.checkPass !== '') {
            this.$refs.NewruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.NewruleForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var mobile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入手机号!'))
        }
        setTimeout(() => {
          if (
            !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
              value
            )
          ) {
            callback(new Error('手机号格式有误'))
          } else {
            callback()
          }
        }, 100)
      }

      return {
        checked: false,
        menuData: [],
        menuDefaultProps: {
          children: 'children',
          label: 'title'
        },
        menuId: '',
        defaultMenuTree: [],
        defaultExpand: false,
        menuShow: false, // 菜单权限弹窗
        dataShow: false,
        dataId: '', // 数据权限编辑
        dataList: [], // 数据权限列表
        dataCheckboxList: [], // 数据权限选中的,
        isIndeterminate: false,
        dataChecked: false,
        jobIds: [],
        mobile: mobile,
        validatePass: validatePass,
        validatePass2: validatePass2,
        //    搜索数据  部门&岗位&角色
        departmentList: [], // 部门树形
        departmentValue: '', // 部门
        postValue: '',
        postList: [], // 岗位树形
        props: {
          multiple: false,
          emitPath: false,
          checkStrictly: true
        },
        // postList: [],
        roleList: [],
        roleValue: '',
        // --------------
        fileList: [],
        action: `${IP.BEG_IP}xboot/hontUser/uploadFile`,
        odata: [],
        region: '',
        //  上传文件
        jurisdictionList: null, //  权限列表
        input1: '',
        userName: '', // 等级变更记录 name
        list: [],
        isForbidden: [],
        grade_form: {
          userLevel: ['1'], // 弹出框-等级-多选框状态
          description: '' // 弹出框-备注-model
        },
        tableData: [{
          commentTimeFormat: '2020-03-27 14:19:34',
          roleName: '超级管理员',
          userLevel: '一级',
          postscript: '/'
        }],
        listLoading: false, // 列表加载状态
        multipleSelection: [], // 表单选中的数据
        pages: {
          pageNumber: 1, // 当前页
          totalElements: 0, // 总条数
          pageSize: 10 // 每页条数
        },
        gradeDialog: false, // 等级设置 状态
        gradeChangeDialog: false, // 等级变更记录 状态
        phone: '', // 手机号
        userId: '', // 认证所需id
        addUserDialog: false, // 添加用户弹层开关
        NewruleForm: {
          // 添加用户
          nickName: '', // 姓名
          type: 0, // 0是手机号,1是账号
          mobile: '', // 手机号
          department: '', // 部门
          optionsid: '',
          optionsArrid: '',
          departmentid: '',
          userName: '', // 账号
          pass: '', // 密码
          checkPass: '', // 确认密码
          id: ''
        },
        newlyAdded: {
          // 弹出 表单绑定值
          name: '',
          password: '默认密码:hkts1234', //  用户默认密码
          phone: '',
          department: '', //  部门
          distribution: '',
          station: '', // 岗位
          optionItem: '',
          id: '', // id
          postId: ''
        },
        dialogtitle: '添加',
        rules: {
          nickName: [{
            required: true,
            message: '请输入姓名',
            trigger: ['blur']
          }],
          mobile: [{
            validator: mobile,
            trigger: ['blur', 'change']
          }],
          type: [{
            required: true,
            message: '请选择创建类型',
            trigger: ['change']
          }]
        },
        typeKey: false,
        typeDisable: true,
        typegroup: [{
            value: 0,
            label: '手机号'
          },
          {
            value: 1,
            label: '账号'
          }
        ],
        // ----------------------------------------

        isabled: true, // 顶部禁用按钮  show state

        notEmpty: {
          // 弹出 表单验证条件
          name: '',
          phone: ''
        },
        dialogFormVisible: false, // 弹出框状态

        // ------- 编辑弹窗  数据
        optionHidd: false,
        optionData: [],
        defaultProps: {
          children: 'childrenDepartment',
          label: 'title'
        },
        //     角色分配
        options: [],
        value1: [],
        value2: {},
        optionsArr: []
      }
    },
    watch: {
      addUserDialog(newval) {
        if (newval === false) {
          this.NewruleForm = {
            nickName: '',
            type: 0,
            mobile: '',
            department: '',
            optionsid: '',
            optionsArrid: '',
            departmentid: '',
            userName: '',
            pass: '',
            checkPass: '',
            id: ''
          }
          this.value1 = []
          this.value2 = {}
          this.$refs['NewruleForm'].clearValidate()
          this.typegroup = [{
              value: 0,
              label: '手机号'
            },
            {
              value: 1,
              label: '账号'
            }
          ]
        }
      },
      input1(newval, oldval) {
        if (newval === '') {
          this.visitor_getByDepartmentId()
        }
      },
      departmentValue(newval, oldval) {
        if (newval) {
          this.getPostList(newval)
        }
      }

    },

    created() {
      this.visitor_getByDepartmentId()
      this.departmentTree()
      this.getAllList()
      this.hontRole()
      this.getDepartmentList()
      this.roleListFn()
      this.getPostList('')
      this.hontPermissionGetAllList()
      this.getDateAllList()
    },
    methods: {
      // 重置密码
      restPassword(row) {
        this.$confirm('您确定要重置此用户密码吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$Http.restUsersPaw(row.id).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.message,
                  type: 'success'
                })
                this.visitor_getByDepartmentId()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消重置密码'
            })
          })
      },
      // 数据权限弹窗全选反选
      handleCheckAllChange(val) {
        const checked = this.dataList.map((item) => {
          return item.templateName
        })
        this.dataCheckboxList = val ? checked : []
        this.isIndeterminate = false

        this.jobIds = []
        this.dataCheckboxList.forEach((item) => {
          this.dataList.forEach((it) => {
            if (item === it.templateName) {
              this.jobIds.push(it.id)
            }
          })
        })
      },
      // 数据权限选中
      getCheckModel(item) {
        if (this.dataCheckboxList.includes(item.templateName)) {
          this.jobIds.push(item.id)
        } else {
          const index = this.jobIds.findIndex(item_ => item_ === item.id)
          this.jobIds.splice(index, 1)
        }
        if (this.jobIds.length !== this.dataList.length) {
          this.dataChecked = false
        } else {
          this.dataChecked = true
        }
      },
      // 数据权限提交
      dataIsOk() {
        const params = {
          hontUserId: this.dataId,
          flowTemplateinfoIds: this.jobIds
        }

        submDataList(JSON.stringify(params)).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message

            })
            this.dataCheckboxList = []
            this.jobIds = []
            this.dataShow = false
          } else {
            this.$message({
              type: 'error',
              message: res.message

            })
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 获取数据权限列表
      async getDateAllList() {
        try {
          const res = await getDateAllList()
          if (res.code === 200) {
            this.dataList = res.result
          } else {
            this.$message({
              type: 'error',
              message: res.message

            })
            this.dataList = []
          }
        } catch (err) {
          console.log(err)
        }
      },
      // 用户菜单授权确定
      menuIsOk(formName) {
        const list = this.$refs[formName].getCheckedNodes()
        const idList = list.map((item) => item.id)
        const l = []
        list.forEach(item => {
          if (item.parentId && idList.indexOf(item.parentId) === -1 && l.indexOf(item.parentId) === -1) {
            l.push(item.parentId)
          }
        })
        const newArr = idList.concat(l)
        var per = newArr.toString()

        setMenu({
          permIds: per,
          userId: this.menuId
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.message

            })
            this.menuShow = false
          } else {
            this.$message({
              type: 'error',
              message: res.message

            })
            this.menuShow = false
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 获取树
      async hontPermissionGetAllList() {
        try {
          const res = await hontPermissionGetAllList()
          if (res.code === 200) {
            this.menuData = res.result
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
            this.menuData = []
          }
        } catch (err) {
          console.log('err', err)
        }
      },
      // 全选或反选
      checkedAll() {
        if (this.checked) {
          // 全选
          this.$refs.menuTree.setCheckedNodes(this.menuData)
        } else {
          // 取消选中
          this.$refs.menuTree.setCheckedKeys([])
        }
      },
      // 菜单权限
      menuPer(row) {
        console.log('row', row)
        this.menuId = row.id
        getEchoMenu({
          userId: this.menuId
        }).then(res => {
          if (res.code === 200) {
            this.defaultMenuTree = res.result
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
            this.defaultMenuTree = []
          }
        }).catch(err => {
          console.log('err', err)
        })
        this.menuShow = true
      },
      // 数据权限
      dataPer(row) {
        this.dataId = row.id
        getPeopleDataList({
          userId: this.dataId
        }).then(res => {
          if (res.code === 200) {
            this.dataCheckboxList = []
            if (res.result.length > 0) {
              this.jobIds = res.result
              this.dataList.forEach((item) => {
                res.result.forEach((it) => {
                  if (item.id === it) {
                    this.dataCheckboxList.push(item.templateName)
                  }
                })
              })
              if (res.result.length === this.dataList.length) {
                this.dataChecked = true
              } else {
                this.dataChecked = false
              }
            } else {
              this.dataCheckboxList = []
            }
            this.dataShow = true
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
            this.dataCheckboxList = []
          }
        }).catch(err => {
          console.log(err)
        })
      },
      // 是否允许后台登录
      switch_allowLogin(id, status) {
        this.$confirm('确定要将此用户允许同步登录后台吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            SynchronizeBackground({
              hontUserId: id,
              isBackstage: status
            }).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            }).catch((err) => {
              console.log(err)
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消允许'
            })
          })
      },

      // 重置搜索
      resetList() {
        this.input1 = ''
        this.departmentValue = ''
        this.postValue = ''
        this.roleValue = ''
        this.getPostList('')
      },
      // 获取岗位
      async getPostList(departId) {
        try {
          const res = await this.$Http.getPostList({
            departId: departId
          })
          if (res.code === 200) {
            this.postList = res.result
          } else {
            this.$message({
              type: 'error',
              message: res.messsage
            })
            this.postList = []
          }
        } catch (err) {
          console.log(err)
        }
      },

      // 递归
      recursion(item) {
        if (item.childrenDepartment != null) {
          item.children = item.childrenDepartment
          if (item.children.length > 0) {
            item.value = item.id
            item.label = item.title
            item.children.forEach(ff => {
              this.recursion(ff)
            })
          } else {
            item.value = item.id
            item.label = item.title
            item.children = []
          }
        } else {
          item.value = item.id
          item.label = item.title
          item.childrenDepartment = []
        }
      },
      // 获取部门树
      async getDepartmentList() {
        try {
          const res = await this.$Http.getdDepartment()
          if (res.code === 200) {
            this.departmentList = res.result
            this.departmentList.forEach(item => {
              this.recursion(item)
            })
          } else {
            this.$message({
              type: 'error',
              message: res.messsage
            })
            this.departmentOptions = []
          }
        } catch (error) {
          console.log('error', error)
        }
      },

      // 改变创建类型
      changetype(val) {
        console.log('val', val)
        if (val === 0) {
          this.typeDisable = true
          this.rules = {
            nickName: [{
              required: true,
              message: '请输入姓名',
              trigger: ['blur']
            }],
            mobile: [{
              validator: this.mobile,
              trigger: ['blur']
            }],
            type: [{
              required: true,
              message: '请选择创建类型',
              trigger: ['change']
            }]
          }
        } else if (val === 1) {
          this.typeDisable = false
          this.rules = {
            type: [{
              required: true,
              message: '请选择创建类型',
              trigger: ['change']
            }],
            userName: [{
              required: true,
              message: '请输入账号',
              trigger: ['blur']
            }],
            pass: [{
                validator: this.validatePass,
                trigger: ['blur']
              },
              {
                min: 6,
                max: 15,
                message: '密码最小长度为6最大长度为15',
                trigger: ['blur']
              }
            ],
            checkPass: [{
                validator: this.validatePass2,
                trigger: ['blur']
              },
              {
                min: 6,
                max: 15,
                message: '密码最小长度为6最大长度为15',
                trigger: ['blur']
              }
            ]
          }
        }

        this.NewruleForm.type = this.NewruleForm.type === val ? null : val
        this.typeKey = !this.typeKey
        this.$nextTick(() => {
          this.$refs['NewruleForm'].clearValidate()
        })
      },
      // 模板导出
      templateexport() {
        window.location.href = `${
        process.env.VUE_APP_BEG_IP
      }xboot/report/downloadModel`
      },
      goThat() {
        this.$router.go(0)
      },

      roleListFn() {
        // 角色列表
        this.$Http.HontRole().then(res => {
          this.roleList = res.result.map((item, index) => {
            return {
              id: item.id,
              title: item.name
            }
          })
        })
      },
      queryList() {
        this.$Http
          .hontUserSelectAllList({
            pageNumber: 1,
            pageSize: this.pages.pageSize,
            nickName: this.input1,
            departmentId: this.departmentValue,
            postId: this.postValue,
            roleId: this.roleValue
          })
          .then(res => {
            this.list = []
            this.list = res.result.resultData
            this.pages.totalElements = res.result.totalRows
          })
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3)
      },
      fileUpOk() {
        this.visitor_getByDepartmentId()
        this.$message.success('上传成功')
      },
      fileUpErr() {
        this.$message.error('上传失败')
      },
      //  上传文件、

      submitUpload() {
        this.$refs.upload.submit()
      },

      // 上传文件         结束
      //   编辑按钮  弹窗   树形结构数据方法
      handleNodeClick(data) {
        this.NewruleForm.department = data.title
        if (data.id === '') return false
        this.NewruleForm.departmentid = data.id
      },
      // 编辑按钮里的   树形选项数据
      departmentTree() {
        this.$Http.departmentTree().then(res => {
          this.optionData = res.result
          // console.log("1231321",this.optionData)
        })
      },
      // 岗位列表
      getAllList() {
        this.$Http.getAllList().then(res => {
          // console.log(res)
          res.result.forEach((item, index) => {
            this.options.push({
              id: item.id,
              label: item.title
            })
          })
        })
      },
      // 角色分配
      hontRole() {
        this.$Http.hontRole().then(res => {
          // console.log(res)
          res.result.forEach((item, index) => {
            this.optionsArr.push({
              id: item.id,
              label: item.name
            })
          })
        })
      },
      //  顶部  添加用户
      newConfirm() {
        this.dialogtitle = '新增'
        this.addUserDialog = true
      },
      // 分页请求接口
      visitor_getByDepartmentId(e) {
        this.$Http
          .hontUserSelectAllList({
            pageNumber: this.pages.pageNumber,
            pageSize: this.pages.pageSize,
            nickName: this.input1,
            departmentId: this.departmentValue,
            postId: this.postValue,
            roleId: this.roleValue
          })
          .then(res => {
            this.list = []
            this.list = res.result.resultData
            this.pages.totalElements = res.result.totalRows
          })
      },

      // 禁用状态
      switch_change(id, status) {
        // console.log(id,status)
        this.$confirm('此操作将改变此用户状态, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            // if (status === '-1') {
            //   status = '0'
            // } else {
            //   status = '-1'
            // }
            this.$Http
              .visitor_disable({
                userId: id,
                statu: status
              })
              .then(res => {
                if (res.code === 200) {
                  this.$message.success(res.message)
                  this.visitor_getByDepartmentId()
                } else {
                  this.$message({
                    type: 'error',
                    message: res.message
                  })
                }
              })
              .catch(err => {
                this.$message({
                  type: 'error',
                  message: err
                })
              })
          })
          .catch(err => {
            console.log('error', err)
          })
      },
      // 编辑
      operation(data, index) {
        console.log('data', data)
        this.dialogtitle = '编辑'

        this.NewruleForm.nickName = data.nickName //  姓名
        this.NewruleForm.mobile = data.mobile //  手机号

        this.NewruleForm.department = data.departmentTitle
        this.NewruleForm.type = data.uType
        this.NewruleForm.id = data.id
        this.NewruleForm.departmentid = data.departmentId // /   部门树  id
        this.NewruleForm.userName = data.userName
        this.NewruleForm.pass = ''
        this.NewruleForm.checkPass = ''
        if (this.NewruleForm.type === 0) {
          this.typeDisable = true
          this.typegroup = [{
            value: 0,
            label: '手机号'
          }]
          this.rules = {
            nickName: [{
              required: true,
              message: '请输入姓名',
              trigger: ['blur']
            }],
            mobile: [{
              validator: this.mobile,
              trigger: ['blur']
            }],
            type: [{
              required: true,
              message: '请选择创建类型',
              trigger: ['change']
            }]
          }
        } else if (this.NewruleForm.type === 1) {
          this.typeDisable = false
          this.typegroup = [{
            value: 1,
            label: '账号'
          }]
          this.rules = {
            type: [{
              required: true,
              message: '请选择创建类型',
              trigger: ['change']
            }],
            userName: [{
              required: true,
              message: '请输入账号',
              trigger: ['blur']
            }]
            // pass: [
            //   { validator: this.validatePass, trigger: ['blur'] },
            //   { min: 6, max: 15, message: '密码最小长度为6最大长度为15', trigger: ['blur'] }

            // ],
            // checkPass: [
            //   { validator: this.validatePass2, trigger: ['blur'] },
            //   { min: 6, max: 15, message: '密码最小长度为6最大长度为15', trigger: ['blur'] }
            // ]
          }

          console.log('typegroup', this.typegroup)
        }

        this.value2 = data.roleId
        this.value1 = data.hontPostIds
        const params = {
          title: data.departmentTitle,
          id: data.departmentId
        }
        this.handleNodeClick(params)
        this.addUserDialog = true
      },
      // 删除
      operation_del(data, index) {
        this.$confirm('您确定要删除此用户吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            this.$Http.RemoveUsers(data.id).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: res.message,
                  type: 'success'
                })
                this.visitor_getByDepartmentId()
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },

      // 认证
      authentication(i) {
        this.userName = this.list[i].nickName
        this.phone = this.list[i].mobile
        this.userId = this.list[i].id
        this.gradeChangeDialog = true
      },
      // 认证通过
      pass(is, a, text) {
        this.$Http
          .user_authentication({
            userId: this.userId,
            approve: a || 1
          })
          .then(res => {
            this.gradeChangeDialog = false
            this.$message({
              message: text || '认证成功',
              type: 'success',
              duration: 1000,
              showClose: true
            })
            this.visitor_getByDepartmentId()
          })
      },
      // 拒绝认证
      refuse() {
        this.pass(null, 2, '已拒绝')
      },
      // 添加用户 编辑提交
      establish(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {}
            if (this.dialogtitle === '编辑') {
              this.NewruleForm.optionsid = this.value1
              this.NewruleForm.optionsArrid = this.value2
              if (this.NewruleForm.type === 0) {
                params = {
                  nickName: this.NewruleForm.nickName, // 姓名
                  type: this.NewruleForm.type,
                  mobile: this.NewruleForm.mobile, // 手机号
                  departmentId: this.NewruleForm.departmentid, // 所属部门
                  postIds: this.NewruleForm.optionsid, // 所属岗位
                  roles: this.NewruleForm.optionsArrid, // 角色分配
                  id: this.NewruleForm.id
                }
                this.$Http.customeEdit(params).then(res => {
                  if (res.code === 200) {
                    this.addUserDialog = false
                    this.$message({
                      message: res.message,
                      type: 'success'
                    })
                    this.visitor_getByDepartmentId()
                  } else {
                    this.addUserDialog = false
                    this.$message({
                      message: res.message,
                      type: 'error'
                    })
                  }
                })
              } else {
                params = {
                  userName: this.NewruleForm.userName,
                  nickName: this.NewruleForm.nickName, // 姓名
                  type: this.NewruleForm.type,
                  passWord: this.NewruleForm.pass,
                  departmentId: this.NewruleForm.departmentid, // 所属部门
                  postIds: this.NewruleForm.optionsid, // 所属岗位
                  roles: this.NewruleForm.optionsArrid, // 角色分配
                  id: this.NewruleForm.id
                }
                this.$Http.customeEdit(params).then(res => {
                  if (res.code === 200) {
                    this.addUserDialog = false
                    this.$message({
                      message: res.message,
                      type: 'success'
                    })
                    this.visitor_getByDepartmentId()
                  } else {
                    this.addUserDialog = false
                    this.$message({
                      message: res.message,
                      type: 'error'
                    })
                  }
                })
              }
            } else {
              this.NewruleForm.optionsid = this.value1
              this.NewruleForm.optionsArrid = this.value2
              if (this.NewruleForm.type === 0) {
                params = {
                  nickName: this.NewruleForm.nickName, // 姓名
                  type: this.NewruleForm.type,
                  mobile: this.NewruleForm.mobile, // 手机号
                  departmentId: this.NewruleForm.departmentid, // 所属部门
                  postIds: this.NewruleForm.optionsid, // 所属岗位
                  roles: this.NewruleForm.optionsArrid // 角色分配
                }
                console.log('啊啊', params)
                this.$Http
                  .AddUser(params)
                  .then(res => {
                    if (res.code === 200) {
                      this.NewruleForm.nickName = ''
                      this.NewruleForm.mobile = ''
                      this.NewruleForm.departmentid = ''
                      this.NewruleForm.optionsid = ''
                      this.NewruleForm.optionsArrid = ''
                      this.value1 = this.value2 = this.NewruleForm.department = ''
                      this.addUserDialog = false
                      this.visitor_getByDepartmentId()
                      this.$message({
                        message: res.message,
                        type: 'success'
                      })
                    } else {
                      this.$message({
                        type: 'error',
                        message: res.message
                      })
                    }
                  })
                  .catch(err => {
                    console.log('err', err)
                  })
              } else if (this.NewruleForm.type === 1) {
                params = {
                  userName: this.NewruleForm.userName,
                  nickName: this.NewruleForm.nickName, // 姓名
                  type: this.NewruleForm.type,
                  passWord: this.NewruleForm.pass,
                  departmentId: this.NewruleForm.departmentid, // 所属部门
                  postIds: this.NewruleForm.optionsid, // 所属岗位
                  roles: this.NewruleForm.optionsArrid // 角色分配
                }
                this.$refs[formName].validate(valid => {
                  if (valid) {
                    this.$Http
                      .AddUser(params)
                      .then(res => {
                        if (res.code === 200) {
                          this.NewruleForm.nickName = ''
                          this.NewruleForm.mobile = ''
                          this.NewruleForm.departmentid = ''
                          this.NewruleForm.optionsid = ''
                          this.NewruleForm.optionsArrid = ''
                          this.NewruleForm.pass = ''
                          this.NewruleForm.checkPass = ''
                          this.value1 = this.value2 = this.NewruleForm.department =
                            ''
                          this.addUserDialog = false
                          this.visitor_getByDepartmentId()
                          this.$message({
                            message: res.message,
                            type: 'success'
                          })
                        } else {
                          this.$message({
                            type: 'error',
                            message: res.message
                          })
                        }
                      })
                      .catch(err => {
                        console.log('err', err)
                      })
                  } else {
                    console.log('error submit!!')
                    return false
                  }
                })
              } else {
                this.$message.error('请选择创建类型')
                return
              }
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleCloseAddUser() {
        this.NewruleForm.nickName = ''
        this.NewruleForm.mobile = ''
        this.NewruleForm.departmentid = ''
        this.NewruleForm.optionsid = ''
        this.NewruleForm.optionsArrid = ''
        this.value1 = this.value2 = this.NewruleForm.department = ''
        this.addUserDialog = false
      },
      // 取消弹窗
      handleClose(done) {
        const that = this
        this.$confirm('确认关闭？')
          .then(_ => {
            that.gradeDialog = false
            this.gradeChangeDialog = false
          })
          .catch(_ => {})
      },
      // 表格选中状态
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (val.length > 0) {
          this.isabled = false
          val.forEach(item => {
            // console.log(item);
          })
        } else {
          this.isabled = true
        }
      },
      // 每页条数
      handleSizeChange(val) {
        this.pages.pageSize = val
        this.visitor_getByDepartmentId()
      },
      // 当前页
      handleCurrentChange(val) {
        this.pages.pageNumber = val
        this.visitor_getByDepartmentId()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .app-container {
    padding: 0;
    margin: 20px;
  }

  .search_and_new {
    height: 5vh;
    position: relative;

    .new_btn {
      right: 0;
      position: absolute;
    }
  }

  .search_and_new>div {
    display: inline-block;
    margin-right: 15px;
  }

  .paging_device {
    margin-top: 30px;
    text-align: center;
  }

  .gradeChangeTitle {
    font-size: 15px;
    margin-bottom: 20px;
    padding-left: 40px;
  }

  .dialog ::v-deep .el-dialog__footer {
    text-align: center;
  }

  .dataListbox {
    width: 100%;
    display: flex;
    overflow-y: auto;
    overflow-x: auto;
    height: 400px;

    &_item {
      flex: 1;
      display: block;
      margin-bottom: 5px;
      font-size: 18px;

    }
  }
</style>
